<template>
	<view class="content">
		<image class="logo" src="../../static/logo.png" ></image>
		<view>
			<view class="title">{{title}}</view>
			<view class="text-red">数字：{{num}}</view>
		</view>
		<button class="cu-btn bg-red round" @click.stop="title = '测试'">修改文字</button>
		<button class="cu-btn bg-orange round margin-top" @click="onAddNum">加1</button>
		<button class="cu-btn bg-blue round margin-top" @click="onLoadData">网络请求</button>

	</view>
</template>

<script lang="ts">
	import {
		Component,
		Vue,
		Watch
	} from "vue-property-decorator";
	import {
		onHome
	} from '@/utils/api';
	@Component({
		name: 'Index',
		components: {

		}
	})
	export default class extends Vue {
		private title: String = 'myTitle'; //响应式属性
		private num: number = 123; //对标之前的data函数返回的对象

		onLoad() {
			this.printTitle();
			let a: string = '123';
		}
		@Watch('title') //watch，此处是监听title的变化
		titleChange(newVal: Number, oldVal: Number) {
			console.log(newVal, oldVal);
		}
		printTitle(): void { //methods
			console.log('hahahhhaha')
		}
		onAddNum() {
			this.num++;
		}
		onLoadData() {
			onHome({
				uid: 0
			}).then((res: any) => {
				console.log(res);

				//data.tableData.push(res)
			}).catch((err: any) => {
				console.log(err);
			})
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
